<template>
    <div class="avatar">
        <input class="fileinp" type="file"  ref="file"  @change="startSendFile" >
        <img  @click="startClick" :src="require('@/assets/images/photo.png')" class="avator-icon">

    </div>
    
</template>

<script>
export default {
    methods:{
        startClick(){
            this.$refs.file.click()
        },
        startSendFile(){  
            console.log('dssdds')
            console.log(this.$refs.file.files[0])
            var filedata =  this.$refs.file.files[0]
            var data = new FormData();  // 新建一个表单对象  
            data.append("imgFile",filedata)
            this.$ajax.avatarupload(data,{
                'Content-Type': 'multipart/form-data'
            })
            .then(res=>{
                console.log(res)
            })
        }
    }
}
</script>


<style lang="scss" scoped>
.fileinp{
    display: none;
}
.avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 20px;
    border: 2px solid #fff;
    .avator-icon{
        width:100%;
        height:100%;
        border-radius: 50%;
    }
}

</style>
